import { Engine, Color3, DynamicTexture, FollowCamera, Camera, HemisphericLight, Vector3, Sprite, Scene, ArcRotateCamera, PointLight, StandardMaterial, Texture, ShaderMaterial, IAnimationKey, AssetsManager, MeshAssetTask, AbstractMesh, PickingInfo, Mesh, Animation, MeshBuilder } from 'babylonjs'
import 'babylonjs-loaders';
// @ts-ignore
import MeshWriter from "meshwriter";
import conf from './textConf'

// 文本
export class Text {
  private dom: HTMLCanvasElement
  private engine: Engine
  private scene: Scene
  private camera: ArcRotateCamera

  constructor(dom: HTMLCanvasElement) {
    this.dom = dom
    this.engine = new Engine(this.dom, true)  // 设置引擎
    this.scene = new Scene(this.engine)   // 创建场景
    this.camera = new ArcRotateCamera("Camera", -1, 1, 200, Vector3.Zero(), this.scene, true); // 创建相机
    // console.log(this.camera)
    this.camera.lowerBetaLimit = null as unknown as number
    this.camera.upperBetaLimit = null as unknown as number
    this.camera.lowerAlphaLimit = null as unknown as number
    this.camera.upperAlphaLimit = null as unknown as number

    this.camera.lowerRadiusLimit = 30;   // 缩放最小距离
    this.camera.upperRadiusLimit = 300; //限制相机距离焦点最远距离
    this.camera.attachControl(this.dom, false)  // 把相机放到画布
    this.camera.upVector = new Vector3(0, 0, 100);
    let that = this
    // this.scene.activeCamera!.upperBetaLimit = null
    // this.scene.activeCamera!.lowerBetaLimit = null
    // this.scene.activeCamera.up

    // 创建半球光
    const light = new HemisphericLight('light', new Vector3(1, 1, 0), this.scene);
    // const light2 = new HemisphericLight('light2', new Vector3(0, 0, -1), this.scene);
    // const x = Mesh.CreateLines('x', [Vector3.Zero(), new Vector3(1000, 0, 0)], this.scene)
    // x.color = new Color3(1, 0, 0);
    // const y = Mesh.CreateLines('y', [Vector3.Zero(), new Vector3(0, 1000, 0)], this.scene)
    // y.color = new Color3(0, 1, 1);
    // const z = Mesh.CreateLines('z', [Vector3.Zero(), new Vector3(0, 0, 1000)], this.scene)
    // z.color = new Color3(1, 0, 1);


    const boxSize = 20
    const scale = 25
    // const text = Mesh.CreateBox('box1', boxSize, this.scene)
    // const text2 = Mesh.CreateBox('box2', boxSize, this.scene)
    // const text3 = Mesh.CreateSphere('box2', 20, 20, this.scene)
    // text.position.set(10, 10, 10)
    // text.position.set(0, 0, 0)
    // text2.position.set(35, 0, 0)
    // text3.position.set(60, 0, 0)
    // 文字（必须引入MeshWriter）
    // const writer = MeshWriter(this.scene, { scale: scale, defaultFont: "Arial" })
    // const textMesh = new writer("1", {
    //   ...conf,
    //   position: {
    //     x: boxSize / scale / 2,
    //     y: boxSize / scale + conf['letter-thickness'],
    //     z: boxSize / scale - conf['letter-height']
    //   }
    // })
    // const textMesh2 = new writer("2", {
    //   ...conf,
    //   position: {
    //     x: 1,
    //     y: 0.41,
    //     z: -0.2
    //   }
    // })
    // const textMesh3 = new writer("3", {
    //   ...conf,
    //   position: {
    //     x: 2,
    //     y: 0.41,
    //     z: -0.2
    //   }
    // })

    // 资源管理器
    // var assetsManager = new AssetsManager(this.scene);
    // const meshTask = assetsManager.addMeshTask("skull task", "", "/", "1.stl");
    // const meshTask2 = assetsManager.addMeshTask("skull task", "", "/", "2.stl");
    // assetsManager.load();

    // const dynamicTexture = new DynamicTexture('dy', 50, this.scene, true)
    // dynamicTexture.hasAlpha = true;
    // dynamicTexture.drawText('测', 5, 40, "36px Arial", 'red', "transparent", true);
    // const plane = Mesh.CreatePlane('cp', 50, this.scene)
    // const mt = new StandardMaterial('st1', this.scene)
    // mt.diffuseTexture = dynamicTexture
    // plane.material = mt



    window.addEventListener('resize', () => {
      this.engine.resize();
    })


  }
  render() {
    // 引擎渲染场景
    this.engine.runRenderLoop(() => {
      this.scene.render()
    })
  }
}


